<template>
  <!-- 输入验证码 -->
  <div class="inputCode">
    <img class="back" src="@/assets/img/icons/black/back.svg" @click="$router.back()" />
    <van-number-keyboard :show="show" @blur="show = false" @input="onInput" @delete="code = code.slice(0, code.length - 1)" />
    <div class="title">请输入验证码</div>
    <div class="phone">
      <span>验证码已发送至 </span>
      <span class="phonenumber">{{ $route.query.phone }}</span>
    </div>
    <van-password-input class="code-input" :value="code" :mask="false" :focused="show" @focus="show = true" />
    <div class="countdown-box">
      <span class="countdown" @click="sendSMS">{{ countdown == 0 ? '重新发送验证码' : countdown }}</span>
      <span v-if="countdown != 0"> 秒后重新发送验证码</span>
    </div>
  </div>
</template>

<script>
export default {
  name: 'inputCode',
  //组件挂载完成
  mounted() {
    //倒计时
    this.countDown()
  },
  data() {
    return {
      show: false, //显示数字键盘
      code: '', //验证码结果
      countdown: 60, //倒计时
      ID: 0, //定时器ID
    }
  },
  methods: {
    //开始倒计时
    countDown() {
      this.countdown = 60
      this.ID = setInterval(() => {
        if (this.countdown != 0) this.countdown--
        else {
          clearInterval(this.ID)
        }
      }, 1000)
    },
    //输入
    onInput(value) {
      if (this.code.length >= 6) return //超出长度返回
      this.code += value
      if (this.code.length == 6) {
        this.$toast.loading({
          message: '加载中...',
          forbidClick: true, //禁止背景点击
          duration: 0,
        })
        //提交验证码进行登录验证
        this.$network
          .main('codeLogin', this.$route.query.phone, this.code)
          .then((data) => {
            this.$toast.clear() //清除toast
            //登录成功
            this.$store.commit('setToken', data.token) //设置token
            setTimeout(() => {
              this.$updateUserInfo() //更新用户信息
            }, 50)
            this.$router.go(-2) //回到首页
            //提示验证码正确
            this.$toast({
              type: 'success',
              position: 'bottom',
              message: '登录成功',
            })
          })
          .catch((err) => {
            this.$toast.clear() //清除toast
            //提示验证码错误
            this.$toast({
              type: 'fail',
              position: 'bottom',
              message: err,
            })
          })
      }
    },
    //再次发送验证码
    sendSMS() {
      if (this.countdown != 0) return //还在倒计时中
      this.$toast.loading({
        message: '加载中...',
        forbidClick: true, //禁止背景点击
        duration: 0,
      })
      //前往获取验证码
      this.$network
        .main('getCode', this.$route.query.phone)
        .then((data) => {
          this.$toast.clear() //清除toast
          this.countDown() //倒计时
          //提示成功
          this.$toast({
            type: 'success',
            message: '发送成功！',
          })
        })
        .catch((err) => {
          //提示失败
          this.$toast({
            type: 'fail',
            position: 'bottom',
            message: err,
          })
        })
    },
  },
}
</script>

<style scoped src="./index.css"></style>
